<template>
    <div>
        <div id="container">
            <div class="top">
                <div class="top_left">
                <span class="textA">告警管理</span>/<span class="textB">设备故障</span>
                </div>
            </div>
            <div class="menu">
                <div class="menu_one">
                    <div class="top_menu">
                        <h4>设备故障统计</h4>
                        <div class="refresh" @click="goRefresh">
                            <el-icon><RefreshRight/></el-icon><span>刷新</span>
                        </div>
                    </div>
                    <h6>更新时间 <span>2024/01/01 12:00:03</span></h6>
                </div>
                <div class="menu_two wrapA">
                    <p>故障设备总数</p>
                    <h4>{{listData.total}}</h4>
                </div>
                <div class="menu_two wrapB">
                    <p>未处理故障数</p>
                    <h4>{{listData.noProcess}}</h4>
                </div>
                <div class="menu_two wrapC">
                    <p>当日已处理故障数</p>
                    <h4>{{listData.curMonthProcess}}</h4>
                </div>
                <div class="menu_two wrapD">
                    <p>当月已处理故障数</p>
                    <h4>{{listData.curDateProcess}}</h4>
                </div>
            </div>
            <div class="content">
                <div class="formBox">
                    <div class="left_wrap">
                        <el-form v-model="formData" :inline="true">
                            <el-form-item label="处理状态">
                                <el-input v-model="formData.processStatus" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="警告描述">
                                <el-input v-model="formData.alarmDescription" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="警告时间">
                                <el-config-provider :locale="zhCn">
                                    <el-date-picker
                                    type="datetime"
                                    v-model="formData.alarmStartTime"
                                    placeholder="开始时间"/>
                                </el-config-provider>
                                 <span>至</span>
                                <el-config-provider :locale="zhCn">
                                    <el-date-picker
                                    type="datetime"
                                    v-model="formData.alarmEndTime"
                                    start-placeholder="结束时间"/>
                                </el-config-provider>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="right_wrap">
                        <el-button type="danger" plain @click="getDelete">批量删除</el-button>
                    </div>
                </div>
                <div class="tableBox">
                    <el-table :data="tableData" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" />
                        <el-table-column label="序号" align="center">
                            <template  #default="scope">
                                {{ calculateSerialNumber(scope.$index, scope.row) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="设备名称" align="center">
                            <template #default="scope">{{ scope.row.deviceName }}</template>
                        </el-table-column>
                        <el-table-column label="设备类型" align="deviceType">
                            <template #default="scope">{{ scope.row.type }}</template>
                        </el-table-column>
                        <el-table-column label="告警描述" align="center">
                            <template #default="scope">{{ scope.row.alarmDescription }}</template>
                        </el-table-column>
                        <el-table-column label="位置" align="center">
                            <template #default="scope">{{ scope.row.location }}</template>
                        </el-table-column>
                        <el-table-column label="发生时间" align="center">
                            <template #default="scope">{{ scope.row.timestamp }}</template>
                        </el-table-column>
                        <el-table-column label="处理状态" align="center">
                            <template #default="scope">{{ scope.row.processStatus }}</template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button @click="handleClick(scope.row)" type="primary" link size="small">查看详情</el-button>
                                <el-button @click="handleDelete(scope.row)" type="danger" link size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="bottom">
                        <div class="bottom_left">
                            <span>共{{ total }}条记录</span>
                            <span>{{ formData.currentPage }}/{{ totalPages }} 页</span>
                        </div>
                        <div class="bottom_right">
                            <el-pagination
                                v-model:current-page="formData.currentPage"
                                v-model:page-size="formData.pageSize"
                                :page-sizes="[10, 20, 30, 40]"
                                layout="sizes, prev, pager, next,jumper"
                                :total="total"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"/>
                        </div>
                    </div>  
                </div>
                <el-dialog style="width: 30%;" v-model="dialogTip" :close-on-click-modal="false"
                :close-on-press-escape="false">
                    <div class="tipBox">
                        <div class="img">
                            <img src="../assets/tip.png" alt="">
                        </div>
                        <h3>提示</h3>
                        <p>您是否要删除所选数据?</p>
                    </div>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogTip = false">我再想想</el-button>
                        <el-button type="primary" @click="chooseDelete">确认删除</el-button>
                    </div>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElConfigProvider } from 'element-plus'
import { ElMessage} from 'element-plus';
import {getalarmData,getalarmInfor,getalarmDelete,getStatistics} from "@/api/index"
export default ({
    components:{
        [ElConfigProvider.name]: ElConfigProvider
    },
    data() {
        return{
            zhCn,
            formData:{
                processStatus:"",
                alarmDescription:"",
                alarmStartTime:"",
                alarmEndTime:"",
                pageSize:10,
                currentPage:1
            },
            listData:[],
            tableData:[],
            total:0,
            totalPages:0,
            selectedRows: [], // 用于存储选中的行数据
            dialogTip:false
        }
    },
    mounted(){
        this.getCount();
        this.getData();
    },
    methods:{
        getCount(){
            getStatistics().then(resp => { 
                this.listData = resp.data;
            }).catch(() => {
                // this.loading = false;
            });
        },
        getData(){
            getalarmData(this.formData).then(resp => { 
                this.tableData = resp.data.records;
                this.total = resp.data.total;
                this.totalPages =resp.data.pages;
            }).catch(() => {
                // this.loading = false;
            });
        },
        goRefresh(){
            this.getCount();
            this.getData();
        },
        search(){
            this.getData();
        },
        getDelete(){
            this.dialogTip =true;
        },
        chooseDelete(){},
        handleSizeChange(val){
            this.formData.pageSize = val;
        },
        handleCurrentChange(val){
            this.formData.currentPage = val;
        },
        handleSelectionChange(selections) {
            this.selectedRows = selections;
        },
        calculateSerialNumber(index, row){
            const startIndex = (this.formData.currentPage - 1) * this.formData.pageSize + 1;
            return startIndex + index;
        },
        handleClick(item){
            getalarmInfor(item.id).then(resp => { 
                console.log(resp)
            }).catch(() => {
                // this.loading = false;
            });
        },
        handleDelete(item){
            getalarmDelete(item.id).then(resp => { 
                if(resp.code=="0"){
                    ElMessage({
                        type: 'success',
                        message: '删除成功！'
                    });
                    this.getData();
                } 
            }).catch(() => {
                ElMessage({
                    type: 'error',
                    message: '删除失败！'
                });
                // this.isLoading = false;
            });
        }
    }
})
</script>

<style lang="scss" scoped>
#container{
    width: 100%;
    margin: 0;
    padding: 0;
    // height: 1000px;
    .top{
      height: 63px;
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      .top_left{
        width: 300px;
        height: 63px;
        line-height: 63px;
        .textA{
          font-weight: 400;
          color: #7E7E7E;
          margin-right: 5px;
        }
        .textB{
          font-weight: 400;
          color: #3579F6;
          margin-left: 5px;
        }
      }
    }
    .menu{
        height: 185px;
        background: #FFFFFF;
        border-radius: 10px;
        display: flex;
        .menu_one{
            width: 276px;
            height: 123px;
            border-radius: 10px;
            background-color: #F5F7FE;
            margin: 21px 74px 0 59px;
            .top_menu{
                height: 80px;
                display: flex;
                h4{
                    font-weight: 500;
                    font-size: 16px;
                    color: #3D3D3D;
                    margin: 27px 0 0 38px;
                }
                .refresh{
                    width: 85px;
                    height: 36px;
                    margin: 20px 0 0 10px;
                    text-align: center;
                    color: #FFFFFF;
                    background: #2C77FF;
                    border-radius: 5px;
                    border: 1px solid #2C77FF;
                    cursor: pointer;
                    font-size: medium;
                    .el-icon{
                        width: 24px;
                        height: 24px;
                    }
                    span{
                        line-height: 36px;
                    }
                }
            }
            h6{
                font-weight: 400;
                font-size: 14px;
                margin: 0;
                text-align: center;
                color: rgba(61,61,61,0.54);
            }
        }
        .menu_two{
            width: 276px;
            height: 123px;
            border-radius: 10px;
            text-align: right;
            margin: 21px 74px 0 0;
            p{
                font-weight: 500;
                font-size: 16px;
                color: #3D3D3D;
                margin: 26px 38px 10px 0;
            }
            h4{
                font-weight: 700;
                font-size: 30px;
                margin: 0 60px 0 0;
            }
        }
        .wrapA{
            background-image: url("../assets/one.png");
            h4{
                color: #FF3131;
            }
        }
        .wrapB{
            background-image: url("../assets/two.png");
            h4{
                color: #FF8519;
            }
        }
        .wrapC{
            background-image: url("../assets/three.png");
            h4{
                color: #0FAD93;
            }
        }
        .wrapD{
            background-image: url("../assets/four.png");
            h4{
                color: #1B6BFF;
            }
        }
    }
    .content{
        width: 100%;
        .formBox{
            height: 96px;
            display: flex;
            justify-content: space-between;
            .left_wrap{
                width: 90%;
                .el-input{
                    width: 200px;
                }
                span{
                    margin: 0 10px 0 10px;
                }
            }
            .right_wrap{
                width: 10%;
                display: flex;
            }
        }
        .tableBox{
            // height: 520px;
            .el-table{
                height: 440px;
            }
            .bottom{
                height: 60px;
                display: flex;
                justify-content: space-between;
                .bottom_left{
                    width: 20%;
                    line-height: 60px;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(61,61,61,0.44);
                    span{
                        margin-right: 10px;
                    }
                }
                .bottom_right{
                    .el-pagination{
                        margin: 20px 10px 0 0;
                    }
                }
            }
        }
        .tipBox{
            text-align: center;
            .img{
                margin-top: 34px;
            }
        }
        .dialog-footer{
            text-align: center;
        }
    }
}
</style>